<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>我是精明小卖家</title>
    <link rel="stylesheet" href="biao.css">
</head>
<body>      
    <form id="biaodan"></form>
    <table>
        <thead><tr id="biaotou"></tr></thead>
        <tbody id="shuju"></tbody>
    </table>
</body>
</html>
<script src="ife31data.js"></script>
<script>
    // let tHead = ['商品','地区','一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
    // let area = ['华东','华南','华北'];
    // let goods = ['手机','笔记本','智能音箱'];
    // let tou = document.getElementById('biaotou');
    // let shen = document.getElementById('shuju');
    // let sform = document.getElementById('biaodan');
    
    function createTableHead(head){//表头
      let tableHead= '';
      for(let i = 0;i<head.length;i++){
        tableHead += `<th>${head[i]}</th>`
      }
      tou.innerHTML = tableHead
    }

    function createTableBody(data,chooseArea,choosGoods){//表格内容
      let bBody = '';
      for(let i =0;i<data.length;i++){
          let bTr = `<td>${data[i].product}</td><td>${data[i].region}</td>`;
          for(let k =0;k<data[i].sale.length;k++){
            bTr += `<td>${data[i].sale[k]}</td>`
          }
          bTr = `<tr>${bTr}</tr>`;
          bBody += bTr
      }
      shen.innerHTML = bBody;
    }

    function createForm(data,name){//表单
        let checkbox = '';
        for(let i=0;i<data.length;i++){
            checkbox += `<input type="checkbox" name="${name}" value="${data[i]}" />${data[i]} `
        }
        checkbox = `<input type="checkbox" name="sel${name}" class="all"/>全选/取消全选 ${checkbox}`;
        var z = document.createElement('div');
        z.innerHTML= checkbox;
        sform.appendChild(z);//appenChild()只能添加标签不能添加字符串
    }

    function getData(chooseArea,choosGoods){//获取选中的地区和商品数据
       let data = [];
       console.log(chooseArea,choosGoods);
       if(choosGoods.length<1){//没选商品
             for(let i=0;i<sourceData.length;i++){
                if(chooseArea.indexOf(sourceData[i].region) > -1 ){
                    data.push(sourceData[i]);
                }
            }
       }else if(chooseArea.length<1){//没选地区
            for(let i=0;i<sourceData.length;i++){
                if(choosGoods.indexOf(sourceData[i].product) > -1){
                    data.push(sourceData[i]);  
                }
            }

       }else{//都选了
        for(let i=0;i<sourceData.length;i++){
                console.log(choosGoods.indexOf(sourceData[i].product),chooseArea.indexOf(sourceData[i].region))
                if((choosGoods.indexOf(sourceData[i].product) !== -1) && (chooseArea.indexOf(sourceData[i].region) !==  -1) ){
                    data.push(sourceData[i]);  
                }
            }
            
       }
       createTableBody(data,chooseArea,choosGoods);
    }
    sform.addEventListener('click',function(e){//监听事件
        let area = document.getElementsByName('area');
        let goods = document.getElementsByName('goods');
        var all = document.getElementsByClassName('all');
        let chooseArea = [];
        let choosGoods = [];
        if(e.target.nodeName.toLowerCase() == 'input'){
            if(e.target.className == 'all'){//点击的是否是全选按钮   
                let shuzi = e.target.name == 'selarea' ? 0 : 1; //判断点击的是哪个全选按钮
                let data = shuzi == 1 ? goods : area;
                if(all[shuzi].checked){
                    for(let i=0;i<data.length;i++){
                        data[i].checked = true;
                        if(!shuzi){
                            chooseArea.push(data[i].value);
                        }else{
                            choosGoods.push(data[i].value);
                        }
                       
                    }
                }else{
                    for(let i=0;i<data.length;i++){ 
                        data[i].checked = false;
                        if(!shuzi){
                            chooseArea = [];
                        }else{
                            choosGoods = [];
                        }
                    }
                }
            }else{
                all[0].checked = true;
                all[1].checked = true;
                for(let i=0;i<area.length;i++){ 
                    if(!area[i].checked){
                        all[0].checked = false;
                    }else{
                        chooseArea.push(area[i].value);  
                    }
                    
                }

                for(let i=0;i<goods.length;i++){ 
                    if(!goods[i].checked){
                        all[1].checked = false;
                    }else{
                        choosGoods.push(goods[i].value);
                    }
                    
                }

            }
            console.log(chooseArea,choosGoods);
            getData(chooseArea,choosGoods);
        }  
    })
    createTableHead(tHead);
    createTableBody(sourceData);
    createForm(area,'area');
    createForm(goods,'goods');
</script>

